<template>
  <div>
    <scEcharts height="250px" :option="option"></scEcharts>
  </div>
</template>

<script setup>
import scEcharts from "@/components/scEcharts"
import * as echarts from "echarts"

const option = ref({
  grid: {
    top: "60px",
  },
  tooltip: {
    trigger: "axis",
    textStyle: {
      fontSize: 12 // 字体大小
    },
  },
  legend: {
    data: [
      "浏览云胶片报告人次数量",
      "浏览云胶片报告人次走势"
    ],
    top: 6, //调整图例位置
    icon: 'circle',
    itemWidth: 8,
    itemHeight: 8,
    itemGap: 16,
    icon: "circle",
    formatter: function (_name) {
      return `{a|${_name}}`;
    },
    textStyle: {
      color: "#333333",
      fontSize: 12,
      rich: {
        a: {
          verticalAlign: "middle",
          padding: [4, 0, 0, 0],
        },
      },
    },
  },
  xAxis: {
    type: "category",
    data: [
      "内分泌科",
      "骨科",
      "内科",
      "儿科",
      "妇科",
      "皮肤科",
      "耳鼻喉科",
      "病理科",
      "生殖科",
      "肿瘤科",
      "消化科",
      "泌尿科",
    ]
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "浏览云胶片报告人次数量",
      data: [1250, 2200, 1750, 1180, 1270, 1310, 1380, 1520, 1200, 1950, 1080, 1670],
      type: "bar",
      barCategoryGap: "30%",
      itemStyle: {
        borderRadius: [2, 2, 0, 0]
      },
      color: {
        type: "linear",
        x: 0, //右
        y: 0, //下
        x2: 0, //左
        y2: 1, //上
        colorStops: [
          {
            offset: 0,
            color: "#0984e3", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#74b9ff", // 100% 处的颜色
          }
        ]
      }
    },
    {
      name: "浏览云胶片报告人次走势",
      data: [2020, 3000, 2050, 1600, 1900, 2010, 2030, 2020, 1460, 2040, 1200, 1790],
      type: "line",
      showAllSymbol: true,
      symbolSize: 0,
      smooth: true,
      lineStyle: {
        width: 2,
        color: "rgba(0, 206, 201,1)", // 线条颜色
        borderColor: "rgba(0,0,0,.4)",
      },
      itemStyle: {
        color: "rgba(0, 206, 201,1)",
        borderColor: "#646ace",
        borderWidth: 0,
      },
      areaStyle: {
        //区域填充样式
        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(0, 206, 201,.3)",
            },
            {
              offset: 1,
              color: "rgba(0, 206, 201, 0)",
            },
          ],
          false
        ),
        shadowColor: "rgba(0, 206, 201, 0.5)", //阴影颜色
        shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
      },
    },
  ],
})
</script>

<style></style>
